<template>
  <div class="index-wrapper">

    <el-menu theme="dark" :default-active="currentNavIndex" class="home-nav" mode="horizontal" @select="handleNavSelected">
      <el-menu-item v-for="item in navItems" class="home-nav-item" :index="item.path" v-text="item.name"></el-menu-item>
    </el-menu>

    <transition>
      <router-view></router-view>
    </transition>

  </div>
</template>
<style lang="less">
  .index-wrapper {
    height: 100%;
    .home-nav{
      border-radius: 0;-webkit-border-radius:0;-moz-border-radius:0;
      position: fixed;
      top:0;
      left:0;
      width: 100%;
      z-index: 99;
    }
    .home-nav-item {
      float: right!important;
    }
  }

  .current-main-nav:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
  }
</style>
<script>
    import { HOME_NAV_CONFIG } from '../../config/home-nav-config.js'

    export default{
      name: 'main',
      data () {
        return {
          navItems: HOME_NAV_CONFIG.items
        }
      },
      methods: {
        handleNavSelected (path) {
          let _obj = {
            path: path
          }
          this.navItems.forEach((item, index) => {
            if (item.path === path) {
              item.query && (_obj.query = item.query)
              item.params && (_obj.params = item.params)
            }
          })
          this.$router.push(_obj)
        },
        logout () {
          this.$http.get('restapi/smartfactory/user/auth/logout').then((response) => {
            window.localStorage.clear()
            this.$router.push({
              path: 'login'
            })
          }, (response) => {

          })
        }
      },
      computed: {
        currentNavIndex () {
          console.log(this.$route)
          return this.$route.path
        }
      },
      mounted () {
        this.$store.dispatch('FETCH_DICTIONARY')
      }
    }

</script>
